<template name="ttBar">
	<view>
		<view class="topFixed" :style="{'height':ptop+'px'}">
		
			<statusBar :bgColor="bgColor"></statusBar>
		
			<view class="ttBarBox" :style="{backgroundColor:bgColor,color:color}">
				<view class="leftBox tapBg"  id="leftEvent" @tap="btnTap" >
					<text v-if="leftIcon" class="iconfont leftIcon" :class="leftIcon" :style="{color:color}" ></text>
					<slot name="leftCnt"></slot>
					<slot name="leftTxtCnt"></slot>
					
					<text v-if="leftText" class="leftText">{{ leftText }}</text>
				</view>
				<text v-if="title" class="title" :style="{'padding-right':titleAlign=='center'?'0':'27%'}">{{title}}</text>
				<view class="rightBox tapBg" >
					<slot name="rightCnt"></slot>
					<view class="rightBtnItem" id="rightEvent" @tap="btnTap">
						<text v-if="rightText!=''" class="rightText"  >{{ rightText }}</text>
						<text v-if="rightIcon" class="iconfont rightIcon" :class="rightIcon" :style="{color:color}" ></text>
					</view>
					<!-- <button class="shareBtn rightBtnItem" open-type="share" v-if="isShare!=0">
						<text class="iconfont icon-share rightIcon" :style="{color:color}"></text>
					</button> -->
					
				</view>
			</view>
			
		</view>
		<view v-if="showZhanwei" class="topZhanWei" :style="{'height':ptop+'px'}"></view>
	</view>

	
</template>

<script>
	import statusBar from "../statusBar/statusBar.vue";
	export default {
		components:{statusBar},
		name: 'ttBar',
		props: {
			title: {
				type: String,
				default: '',
			},
			titleAlign:{
				type:String,
				default:'center'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: '',
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			leftTapFun: {
				type: Function,
				default: null
			},
			rightTapFun: {
				type: Function,
				default: null
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			color:{
				type:String,
				default:'#000000'
			},
			showZhanwei:{
				type:Boolean,
				default:true
			},
			isShare:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				ptop:uni.getSystemInfoSync().statusBarHeight+uni.upx2px(90)
			}
		},
		methods: {
			btnTap(e) {
				if (e.currentTarget.id == "leftEvent") {
					if (this.leftTapFun) {
						this.leftTapFun();
					} else {
						if(this.isShare){
							this.toPage({
								url:'index'
							})
						}else{
							this.pBack()
						}
						
					}
				} else {
					if (this.rightTapFun) {
						this.rightTapFun();
						// this.rightTapFun();
					} 

				}
			},
		},

	}
</script>

<style lang="less">
	.shareBtn{
		background-color: rgba(0,0,0,0);
	}
	.topZhanWei {
	}
	.topFixed {
		position: fixed;
		width: 100%;
		z-index: 996;
		top: 0;
		left: 0;
	}

	.ttBarBox {
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		background-color: #ffcd11;
		left: 0;
		position: relative;
		padding: 0 34upx;
		.leftBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			left: 0;
			line-height: 90upx;

			.leftIcon {
				font-size: 44upx;
				margin-right: 10upx;

			}

			.leftText {}
		}

		.rightBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 10upx 0 0;
			z-index: 999;
			align-items: center;
			justify-content: flex-end;
			top: 0;
			right: 0;
			/* #ifdef MP */
			right: 27%;
			/* #endif */
			line-height: 90upx;

			.rightIcon {
				font-size: 40upx;
				margin-left: 10upx;
			}

			.rightText {}
			.rightBtnItem{
				display: flex;
				align-items: center;
				margin-left: 20upx;
			}
			.rightBtnItem:first-child{
				margin-left: 0;
			}
		}

		.title {
			display: inline-block;
			line-height: 90upx;
			width: 100%;
			text-align: center;
			overflow: hidden;
			
		}

	}

</style>
